<template>
	<HyTable
		:userList="userList"
		@selectChange="selectChange"
		v-bind="contentTableConfig"
		:listCount="userCount"
		v-model:page="pageInfo"
	>
		<!-- 插槽 -->

		<template #header-handler>
			<el-button  @click="handleNewClick">新建用户</el-button>
			<el-button
				><el-icon class="el-icon"><Refresh /></el-icon>刷新</el-button
			>
		</template>
		<template #status="props">
			<el-button
				plain
				size="small"
				:type="props.row.enable ? 'success' : 'danger'"
				>{{ props.row.enable ? '启用' : '禁用' }}</el-button
			>
		</template>
		<template #createAt="props">
			<strong>{{ $filters.formatTime(props.row.createAt) }}</strong>
		</template>
		<template #updateAt="props">
			<strong>{{ $filters.formatTime(props.row.updateAt) }}</strong>
		</template>
		<template #handler="props">
			<div class="handler-btn">
				<el-button type="text" size="small"  @click="handleEditClick(props.row)"
					><el-icon><Edit /></el-icon> 编辑</el-button
				>
				<el-button type="text" size="small" plain  @click="handleDeleteClick(props.row)"
					><el-icon><Delete /></el-icon> 删除</el-button
				>
			</div>
		</template>

		<!-- 动态插槽 -->
		<template
			v-for="item in otherPropSlots"
			:key="item.prop"
			#[item.slotName]="props"
		>
			<template v-if="item.slotName">
				<slot :name="item.slotName" :row="props.row"></slot>
			</template>
		</template>
	</HyTable>
</template>

<script lang="ts">
	import { defineComponent, computed, ref, watch } from 'vue'
	import { useStore } from 'vuex'
	import HyTable from '@/base-ui/table'
	import { usePermission } from '@/hooks/use-permission'
	export default defineComponent({
		components: {
			HyTable
		},
		props: {
			contentTableConfig: {
				type: Object
			},
			pageName: {
				type: String,
				required: true
			}
		},
    emits:['newBtnClick','editBtnClick'],
		setup(props,{emit}) {
			const store = useStore()

			// const isCreate = usePermission(props.pageName, 'create')
			// const isUpdate = usePermission(props.pageName, 'update')
			// const isDelete = usePermission(props.pageName, 'delete')
			// const isQuery = usePermission(props.pageName, 'query')
			//双向绑定pageInfo的信息
			const pageInfo = ref({ currentPage: 1 , pageSize: 10 })

			watch(pageInfo, () => {
				getPageData()
			})
			//发送网络请求
			const getPageData = (userInfo: any = {}) => {
				//如果没有搜索权限  就不发送网络请求
				// if (!isQuery) return
				store.dispatch('systemModule/getPageListAction', {
					pageName: props.pageName,
					queryInfo: {
						offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
						size: pageInfo.value.pageSize,
						...userInfo
					}
				})
			}
			//从vuex中获取数据
			getPageData()
			let userList = computed(() => {
				switch (props.pageName) {
					case 'user':
						return store.state.systemModule.usersList
						break
					case 'role':
						return store.state.systemModule.roleList
						break
					case 'goods':
						return store.state.systemModule.goodsList
						break
					case 'menu':
						return store.state.systemModule.menuList
						break
				}
			})
			const userCount = computed(() => {
				switch (props.pageName) {
					case 'user':
						return store.state.systemModule.usersCount
						break
					case 'role':
						return store.state.systemModule.roleCount
						break
					case 'goods':
						return store.state.systemModule.goodsCount
						break
					case 'menu':
						return store.state.systemModule.menuCount
				}
			})
			const selectChange = (value: []) => {
				console.log(value)
			}
			//获取其他动态插槽的名称
			const otherPropSlots = props.contentTableConfig?.propList.filter(
				(item: any) => {
					if (item.slotName === 'status') return false
					if (item.slotName === 'createAt') return false
					if (item.slotName === 'updateAt') return false
					if (item.slotName === 'handler') return false
					return true
				}
			)
			//删除数据
			const handleDeleteClick = (value:any)=>{
        store.dispatch('systemModule/deletePageDataAction',{
          pageName:props.pageName,
          id:value.id
        })
			}
      //新建用户
      const handleNewClick = ()=>{
        emit('newBtnClick')
      }
      //编辑用户
      const handleEditClick = (item:any)=>{
        emit('editBtnClick',item)
      }
			return {
				selectChange,
				userList,
				getPageData,
				userCount,
				pageInfo,
				otherPropSlots,
				// isCreate,
				// isUpdate,
				// isDelete,
				handleDeleteClick,
        handleNewClick,
        handleEditClick
			}
		}
	})
</script>


<style lang="less" scoped>
	.el-icon {
		padding-right: 10px;
	}

	.handler-btn {
		display: flex;
		.el-button {
			padding: 0;
		}
		.el-icon {
			padding-right: 3px;
		}
	}
</style>